<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="订单搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top" status-bar></uni-nav-bar>
		 <form @submit="formSubmit" >
		<view class="ul qf">
			<view class="li">
				<text>姓 名</text>
				：
				<input type="text" name="names" value="" v-model="contactUser" placeholder="请输入姓名" />
			</view>
			<view class="li">
				<text>手 机 号</text>
				：
				<input type="number" maxlength="11" name="phone" v-model="contactPhone" value="" placeholder="请输入手机号" />
			</view>
			<view class="li">
				<text>订 单 号</text>
				：
				<input type="text" name="num" value="" v-model="orderSn" placeholder="请输入订单号" />
			</view>
			<view class="li">
				<text>货 号</text>
				：
				<input type="text" name="huohao" value="" v-model="goodsSn" placeholder="请输入货号" />
			</view>
			<view class="li">
				<text>代 理 商</text>
				：
				<!-- <input type="text" name="daili" v-model="daili" placeholder="请输入代理商手机号/优惠ID" @focus="open()"/> -->
				<view @click="open()" class='noagent' :class="daili?'':'color999' ">{{daili?daili:'选择代理商'}}</view>
				<view  class="arrowright">
						<image src="/static/img/rightarrow.png" mode="" ></image>
					</view>
			</view>
			<view class="li">
				<text>状态查询</text>
				：
				<picker @change="bindPickerChange"  :range="status" range-key="desp">
					<view class="uni-input" :class="{color999:statustext=='请选择状态'}">{{statustext}}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>订单类型</text>
				：
				<picker @change="bindPickercataChange"  :range="cata" range-key="text">
					<view class="uni-input" :class="{color999:catatext=='请选择类型'}">{{ catatext }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>下单开始时间</text>
				：
				<picker mode="date" :value="date" start="2000-01-01" :end="endDate"  @change="bindDateChange">
					<view class="uni-input" v-show="date">{{ date }}</view>
					<view class="uni-placeholder" v-show="!date">请选择下单开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>下单结束时间</text>
				：
				<picker mode="date" :value="edate" start="2000-01-01" :end="endDate"  @change="bindeDateChange">
					<view class="uni-input" v-show="edate">{{ edate }}</view>
					<view class="uni-placeholder" v-show="!edate">请选择下单结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>审核开始时间</text>
				：
				<picker mode="date" :value="shenhdate" start="2000-01-01" :end="endDate" @change="bindshenhDateChange">
					<view class="uni-input" v-show="shenhdate">{{ shenhdate }}</view>
					<view class="uni-placeholder" v-show="!shenhdate">请选择审核开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>审核结束时间</text>
				：
				<picker mode="date" :value="shenhedate" start="2000-01-01" :end="endDate" @change="bindshenheDateChange">
					<view class="uni-input" v-show="shenhedate">{{ shenhedate }}</view>
					<view class="uni-placeholder" v-show="!shenhedate">请选择审核结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
		</view>
		<button class="button" form-type="submit">搜 索</button>
		</form>
		
		
	</view>
</template>

<script>
import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';
import order from '../../../servers/agent/order/orderfind.js';
export default {
	components: { uniNavBar, uniIcons, uniPopup },
	data() {
		return {
			status: [],
			statustext:'请选择状态',
			cata:[{code:'TYPE1',text:'正价订单'},{code:'TYPE2',text:'秒杀订单'},{code:'TYPE3',text:'代理商活动订单'}],
			statuscode: '',
			catatext:'请选择类型',
			catacode:'',
			date: null,
			edate:null,
			shenhdate:null,
			shenhedate:null,
			endDate: null,
			daili:'',
			agentlist:'',
			contactUser:'',
			contactPhone:'',
			orderSn:'',
			goodsSn:'',
			current:'',
			agentid:'',
		
		};
	},
	mounted() {
		this.endDate = this._endDate();
		// this.open();
		this.initData();
		
	},
	onShow() {
		var _this=this;
		uni.$once('checked',function(data){
			var obj=JSON.parse(data)
			_this.daili=obj.name;
			_this.agentid=obj.id
		})
	},
	methods: {
	initData(){
			order.getSysTagList().then(res => {
				if(res.code == 200){
			           this.status=res.data;
						
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}	
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});	
		
	},
	// choose(item){
	// 	this.daili=item.name;
	// 	this.agentid=item.id
	// 	this.current=item.id;
	// },
		// 提交
		formSubmit(e){
			var params={
				// agentId:null,
				contactUser:e.detail.value.names,
				contactPhone:e.detail.value.phone,
				orderSn:e.detail.value.num,
				auditEndTime:this.shenhedate,
				auditStartTime:this.shenhdate,
				endTime:this.edate,
				startTime:this.date,
				goodsSn:e.detail.value.huohao,
				orderType:this.catacode,
				orderStatus:this.statuscode,
				selectedAgentId:this.agentid
				
			}
			if(this.date&&this.edate&&(this.edate<this.date)){
				uni.showToast({
					title:'下单结束时间不能小于开始时间~',
					icon:'none'
				})
				this.edate=''
				
			}
			if(this.shenhedate&&this.shenhdate&&(this.shenhedate<this.shenhdate)){
				uni.showToast({
					title:'审核结束时间不能小于开始时间~',
					icon:'none'
				})				
				this.shenhedate=''
				
			}
			uni.navigateTo({
				url:'./orderfindlist?arr='+JSON.stringify(params)
			})
		
			
		},
	
		
		
		
		
		bindPickerChange(e) {
			this.statuscode=this.status[e.target.value].value;
			this.statustext=this.status[e.target.value].desp;
		},
		bindPickercataChange(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.catacode=this.cata[e.target.value].code;
			this.catatext=this.cata[e.target.value].text;
			
		},
		bindDateChange(e) {
			this.date = e.target.value;
		},
		bindeDateChange(e){
			this.edate = e.target.value;
		},
		bindshenhDateChange(e){
			this.shenhdate = e.target.value;
		},
		bindshenheDateChange(e){
			this.shenhedate = e.target.value;
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {
			this.date= null,
			this.edate=null,
			this.shenhdate=null,
			this.shenhedate=null,
			this.daili='',
			this.agentid='',
			this.agentlist='',
			this.contactUser='',
			this.contactPhone='',
			this.orderSn='',
			this.productSn='',
			this.catacode='',
			this.goodsSn='',
			this.statuscode= '',
			this.catatext='请选择类型',
			this.statustext='请选择状态'
		},
		
		open(){
			uni.navigateTo({
				url:'../placeorder/tree?type=2'
			})
		},	
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
	
	}
};
</script>

<style lang="less" scoped>
	.current{
		color: #bd3c8c;
	}
	.arrowright{
		position: absolute;
		right: 0;
		top: 6rpx;
		width: 30px;
		text-align: center;
		pointer-events: none;
		image{
			width: 18rpx;
			height: 34rpx;
		}
	}
	.noagent{
		font-size: 13px;
		    width: 278px;
		    height: 43px;
		    line-height: 43px;
		    border: 1px solid #e1e1e1;
		    -webkit-border-radius: 5px;
		    border-radius: 5px;
		    padding: 0 10px;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		    margin: 7px 0;
			
	}
	.color999{
		color: #999;
	}
.qf {
	padding: 0 20rpx;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 190rpx;
			text-align-last: justify;
		}
		.color999{
			color: #999;
		}
		input,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.find,
		.uni-arrowdown,
		.time {
			position: absolute;
			right: 0;
			top: 15rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.find {
			width: 121rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #bd3c8c;
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.uni-arrowdown {
			width: 50rpx;
			pointer-events: none;
		}
		.time {
			top: 40rpx;
			right: 20rpx;
			width: 36rpx;
			height: 34rpx;
			pointer-events: none;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
.structure {
	width: 80vw;
	max-height: 60vh;
	margin: 0 auto;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 20rpx;
	.ul {
		padding-bottom: 100rpx;
		.li {
			line-height: 123rpx;
			.msg {
				font-size: 30rpx;
				padding: 0 20rpx 0 80rpx;
				border-bottom: 1px solid #e1e1e1;
				image {
					width: 26rpx;
					height: 22rpx;
					margin-right: 26rpx;
					transform: rotate(-90deg);
				}
				image.avtive {
					transform: rotate(0deg);
				}
				.name {
					margin-right: 30rpx;
				}
				.isname {
					color: #bd3c8c;
				}
			}
			.sublevel {
				padding: 0 20rpx 0 70rpx;
			}
		}
	}
	.choice {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		line-height: 88rpx;
		background: #bd3c8c;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
}
</style>
